<template>
   <div style="display: flex;">
      <div id="pie" class="pie" ></div>
      
      <div class="count" >
        <div class="count-item" >
          <div class="profit">今日获利：{{todayProfit}}&nbsp;¥
            <i v-if="todayProfit > 0" class="el-icon-caret-top" style="color:green; font-size:24px;"></i>
        </div>
        
            
        </div>
        
        <div class="count-item">
            <div class="profit" >累计获利：<span style="color:green;display:inline-block;">{{totalProfit}}</span>&nbsp;¥</div>
        </div>
        <div class="count-item">
            <div  class="profit" >今日订单：{{todayOrder}}
                <i v-if="todayOrder > 0" class="el-icon-caret-top" style="color:green; font-size:24px;"></i>
            </div>
        </div>
        <div class="count-item">
            <div class="profit" >累计订单：<span style="color:green;display:inline-block;">{{totalOrder}}</span></div>
        </div>
      </div>
      <div id="column" class="column" ></div>
    </div>
</template>

  
  <script>
  import request from '@/request/request.js';
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        todayProfit: 0,
        totalProfit: 0,
        todayOrder: 0,
        totalOrder: 0,
      };
    },
  
  created() {
    this.fetchProfit(this.user.id);
  },
    name: "countView",
    mounted() {
      this.initPie();
      this.initEcharts();
      this.initColumn();
      this.fetchProfit(this.user.id);
    },
    methods: {
      fetchProfit(id) {
        
        request.get("/shop/profit/"+id).then((res) => {
          if (res.code === "0") {
            console.log(res.data);
            if(res.data.todayProfit!==null){
            this.todayProfit = res.data.todayProfit;}
            this.totalProfit = res.data.totalProfit;
            if(res.data.todayOrder!==null){
            this.todayOrder = res.data.todayOrder;}
            this.totalOrder = res.data.totalOrder;
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      initEcharts() {
        request.get("/shop/echarts/pie").then((res) => {
          if (res.code === "0") {
            this.initPie(res.data);
          } else {
            this.$message.error(res.msg);
          }
        });
        request.get("/shop/echarts/column").then((res) => {
          if (res.code === "0") {
            let map=res.data;
            this.initColumn(map.xAxis,map.yAxis);
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      initColumn(xAxis,yAxis) {
        var chartDom = document.getElementById("column");
        var myChart = echarts.init(chartDom);
        var option;
     
  
        option = {
          title: {
            text: "数据统计（柱状图）",
            subtext: "统计维度：学科分类",
            left: "center",
          },
          xAxis: {
            type: "category",
            data: xAxis,
          },
          yAxis: {
            type: "value",
            max:10,
          },
          series: [
            {
              data: yAxis,
              type: "bar",
            },
          ],
        };
  
        option && myChart.setOption(option);
      },
      initPie(data) {
        let chartDom = document.getElementById("pie");
        let myChart = echarts.init(chartDom);
        let option;
  
        option = {
          title: {
            text: "数据统计（饼图）",
            subtext: "统计维度：学科分类",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "分类统计",
              type: "pie",
              center: ["50%", "50%"],
              radius: "50%",
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        option && myChart.setOption(option);
      },
    },
  };
  </script >
  
  <style>
  /* .el-main {
    background-color: white;
} */
.count {
  margin-top:70px;
  width:175px;
  height:250px;
  float:left;
  background-color:white;
  margin-left:50px;
  border-radius:5px;
}
.count-item {
  margin-top:20px;
  width:175px;
  height:40px;
  float:left;
  background-color:pink;
  border-radius:5px;
 
}
.pie{
  margin-top:70px;
  width:500px;
  height:500px;
  float:left;
  background-color:white;
  border-radius:5px;
}
.column{
  margin-top:70px;
  width:500px;
  height:500px;
  float:left;
  background-color:white;
  margin-left:50px;
  border-radius:5px;
  display: flex;
}
.profit{
  margin-top:10px;
  font-weight:bold;
  font-size:18px;
  display: inline-block;
}

</style>
  